<!DOCTYPE html>
<html>
<head th:include="common/head.html"></head>

<body onload="window.scrollTo(0,0)">

<input type="hidden" th:value="${visitId}" id="visitId" />
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
    var context = "[[@{/}]]";
    var visitId = $("#visitId").val();
    var basePath = 'http://merrywxf.xyz';
    postAjax( basePath+'/wx_sign',{url:encodeURIComponent(window.location.href)},function (msg) {
        var res = JSON.parse(msg);
        wx.config({
            debug: true,
            appId: res.appId,
            timestamp: res.timestamp,
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: ['checkJsApi','updateAppMessageShareData', 'updateTimelineShareData','onMenuShareWeibo','getLocation',
            'chooseImage','previewImage']
        });
    });
    wx.ready(function () {
        var title = '太平洋保险-太捷通1.0';
        var desc = '一键操作享服务\n方便快捷伴相随';
        var linkUrl=basePath+"?visitId="+visitId;
        var imgUrl = basePath + '/images/mobile/share_logo6.png';
        var shareData = {
            'title': '' + title + '', // 分享标题
            'desc': '' + desc + '', // 分享描述
            'link': '' + linkUrl + '', //网页地址
            'imgUrl': '' + imgUrl + '', //小图片的地址
            'width': '' + 120 + '',
            'height': '' + 120 + '',
            success: function () {
                // 用户确认分享后执行的回调函数
                console.log("分享成功");
                getAjax("/share/save",{type:'0',status:'0',visitId:visitId},function (msg) {
                    console.log(msg)
                })
            },
            cancel: function () {
                console.log("取消分享");
                getAjax("/share/save",{type:'0',status:"1",visitId:visitId},function (msg) {
                    console.log(msg)
                })
                // 用户取消分享后执行的回调函数
            }
        };
        wx.updateAppMessageShareData(shareData);
        wx.updateTimelineShareData(shareData);
        wx.onMenuShareWeibo(shareData);
        wx.getLocation({
            type: 'wgs84',
            success: function (ret) {
                console.log(ret);
                if (visitId) {
                    getAjax("/visit/update", {
                        latitude: ret.latitude,
                        longitude: ret.longitude,
                        id: visitId
                    }, function (msg) {
                        console.log(msg);
                    })
                }
            }
        });
    });
</script>

<div class="layout-wrap">
    <div class="wap-header">
        <a href="/" title="太平洋保险"><img class="fl logo" src="images/mobile/logo-blue.png" alt="太平洋保险"/></a>
        <img class="fl logo2" src="images/mobile/top-logo-2.png" alt="太好赔"/>
        <img class="fr tel" src="images/mobile/top-logo-tel.png"/>
        <div class="clearfix"></div>
    </div>
</div>
<div class="layout-wrap">
    <div class="wap-header">
        <button onclick="showLocalImage()">打开相册</button>
    </div>
</div>
<div class="layout-wrap">
    <div class="wap-header" id="chooseImage">

    </div>
</div>
<div class="clearfix"></div>

<div class="layout-wrap step0">
    <!--<a href="http://wxcd.cpic.com.cn/mic/ihandy_fore/indexService/selectedcar.action?from=singlemessage&isappinstalled=0" class="one">立即投保</a>-->

    <div id="dl-menu" class="dl-menuwrapper">
        <button id="dl-menu-button" style="font-size:14px;padding:0;">一键投保</button>
        <ul class="dl-menu">
            <li>
                <a href="http://wxcd.cpic.com.cn/mic/ihandy_fore/indexService/selectedcar.action?from=singlemessage&isappinstalled=0">爱车生活</a>
            </li>
            <li><a href="http://kjgxplus.cpic.com.cn/kjgx/page/down/downplus.html">科技个险plus</a></li>
        </ul>
    </div>
    <a href="tel:95500" class="zero two">一键咨询</a>
    <a href="http://wxcd.cpic.com.cn/mic/ihandy/page2017/enjoy/claims.jsp?openid=oIVq0jskIIG9zQtHJkA4mBWtM4tU"
       class="zero three">一键报案</a>
    <a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc3429cb8df150979&redirectUri=http%3A%2F%2Fwxcd.cpic.com.cn%2Fmic%2Fclub%2Frt.action%3Fweixid%3Dgh_60e60d160cfb%26key%3DwecharAssistance&response_type=code&scope=snsapi_base&state=1#wechat_redirect"
       class="zero four">一键救援</a>
    <a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc3429cb8df150979&redirectUri=http%3A%2F%2Fwxcd.cpic.com.cn%2Fmic%2Fclub%2Frt.action%3Fweixid%3Dgh_60e60d160cfb%26key%3Dcarlife&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect"
       class="zero five">一键享权</a>
    <img src="images/mobile/p2-0.jpg" width="100%"/>
    <img src="images/mobile/p3.jpg" width="100%"/>
</div>
<script type="text/javascript">
    $(function () {
        $('#dl-menu').dlmenu();
    });
</script>
<div class="clearfix"></div>

<div class="layout-wrap step1">
    <img class="t1 pt-page-moveFromLeft" src="images/mobile/p4-t1.png"/>
    <img class="t2 pt-page-moveFromRight" src="images/mobile/p4-t2-1.png"/>
    <img class="women pt-page-moveFromLeft" src="images/mobile/p4-women.png"/>
    <img class="man pt-page-moveFromBottom" src="images/mobile/p4-man.png"/>
    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('撞车了，怎么办？','1')"><!--详情点击--></a>
    <img class="bg" src="images/mobile/p4-bg.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<div class="layout-wrap"><img src="images/mobile/p5.jpg" width="100%"/></div>

<div class="clearfix"></div>

<div class="layout-wrap step2">
    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('异地事故，怎么办？','2')"><!--详情点击--></a>
    <img class="bg" src="images/mobile/p6.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<div class="layout-wrap"><img src="images/mobile/p7.jpg" width="100%"/></div>

<div class="clearfix"></div>

<div class="layout-wrap step3">

    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('报案后，多久赔付？','3')"><!--详情点击--></a>
    <img class="bg" src="images/mobile/p8.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<div class="layout-wrap"><img src="images/mobile/p9.jpg" width="100%"/></div>

<div class="clearfix"></div>

<div class="layout-wrap step4">

    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('小额事故，如何处理？','4')"><!--详情点击--></a>
    <img src="images/mobile/p10.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<div class="layout-wrap"><img src="images/mobile/p11.jpg" width="100%"/></div>

<div class="clearfix"></div>

<div class="layout-wrap step5">

    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('大额案件，如何处理？','5')"><!--详情点击--></a>
    <img src="images/mobile/p12.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<div class="layout-wrap"><img src="images/mobile/p13.jpg" width="100%"/></div>

<div class="clearfix"></div>

<div class="layout-wrap step6">

    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('车辆被盗，怎么办？','6')"><!--详情点击--></a>
    <img class="bg" src="images/mobile/p14.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<div class="layout-wrap"><img src="images/mobile/p15.jpg" width="100%"/></div>

<div class="clearfix"></div>

<div class="layout-wrap step7">


    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('修车难如何解决？','7')"><!--详情点击--></a>
    <img class="bg" src="images/mobile/p16.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<div class="layout-wrap"><img src="images/mobile/p17.jpg" width="100%"/></div>

<div class="clearfix"></div>

<div class="layout-wrap step8">

    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('人伤事故，如何处理？','8')"><!--详情点击--></a>
    <img class="bg" src="images/mobile/p18.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<div class="layout-wrap"><img src="images/mobile/p19.jpg" width="100%"/></div>

<div class="clearfix"></div>

<div class="layout-wrap step9">

    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('理赔结果，如何跟踪？','9')"><!--详情点击--></a>
    <img class="bg" src="images/mobile/p20.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<div class="layout-wrap"><img src="images/mobile/p21.jpg" width="100%"/></div>

<div class="clearfix"></div>

<div class="layout-wrap step10">

    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('太保“蓝朋友”服务，有何优势？','10')"><!--详情点击--></a>
    <img class="bg" src="images/mobile/p22.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<div class="layout-wrap"><img src="images/mobile/p23.jpg" width="100%"/></div>

<div class="clearfix"></div>

<div class="layout-wrap step11">

    <a class="pmore pt-page-rotateInNewspaper" href="javascript:showPage('“快处快赔”服务，无需出警，一键定损','11')"><!--详情点击--></a>
    <img class="bg" src="images/mobile/p24.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<!--太保车险，额外保险项目  开始-->
<div class="layout-wrap">
    <img src="images/mobile/p25.jpg" width="100%"/>
    <img src="images/mobile/p26.jpg" width="100%"/>
    <img src="images/mobile/p27.jpg" width="100%"/>
    <img src="images/mobile/p28-1.jpg" width="100%"/>
    <img src="images/mobile/p29.jpg" width="100%"/>

    <img src="images/mobile/p30.jpg" width="100%"/>
    <img src="images/mobile/p31.jpg" width="100%"/>
</div>

<div class="clearfix"></div>

<!--太保车险，额外保险项目  结束-->
<div class="layout-wrap">
    <div class="wap-footer">
        <a href="/" title="太平洋保险"><img class="fl logo" src="images/mobile/logo-white.png" alt="太平洋保险"/></a>
        <img class="fl logo2" src="images/mobile/di-logo-2.png" alt="太好赔"/>
        <img class="fr other" src="images/mobile/di-logo-other.png"/>
        <img class="fr tel" src="images/mobile/di-logo-tel.png"/>
        <div class="clearfix"></div>
    </div>
</div>

<div class="clearfix"></div>
<div id="musicmp3">
    <div id="audio-btn" class="on" onclick="musicmp3.changeClass(this,'media')">
        <audio loop="loop" src="SoulostarInTime.mp3" id="media" preload="preload" autoplay="autoplay"></audio>
    </div>
</div>
<script src="plugins/layui/layui.all.js" charset="utf-8"></script>
<script>
    document.addEventListener("WeixinJSBridgeReady", function () {
        setTimeout(bgm, 2000);
    }, false);

    function bgm() {
        var audio = document.getElementById("media");
        audio.setAttribute("src", "SoulostarInTime.mp3");
        audio.play();
    }

    //mp3 start
    var musicmp3 = {
        changeClass: function (target, id) {
            var className = $(target).attr('class');
            var ids = document.getElementById(id);
            (className == 'on')
                ? $(target).removeClass('on').addClass('off')
                : $(target).removeClass('off').addClass('on');
            (className == 'on')
                ? ids.pause()
                : ids.play();
        },
        play: function () {
            document.getElementById('media').play();
        }
    }
    musicmp3.play();

    function showPage(title, aid) {
        var url = "/step?aid=" + aid;
        var scrollTop = $(document).scrollTop();//获取当前滚动条位置
        $("body").addClass("flexd");//设置绝对定位，此时不操作的话底层页面回到最初位置
        $("body").css("top", -scrollTop);//设置top属性确保屏幕显示滚动条的当前位置

        layer.open({
            scrollbar: false,
            type: 2,
            closeBtn: 0, //不显示关闭按钮
            title: false,
            //title: ''+title+'',
            shadeClose: true,
            shade: 0.8,
            area: ['100%', '100%'],
            content: ['' + url + ''], //iframe的url，no代表不显示滚动条
            end: function () {

                //弹层关闭时执行的语句
                $("body").removeClass("flexd");//取消绝对定位
                $("body").scrollTop(scrollTop);//滚动条回到停留位置
            }
        });
    }

    function jumpUrl(url) {
        window.location.href = url;
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭

    }
function showLocalImage() {
    wx.chooseImage({
        count: 9, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            console.log(localIds);
            $("#chooseImage").empty();
            for(var i=0;i<localIds.length;i++){
                var img='<img  src="'+localIds[i]+'" height="150" width="150"/>';
                $("#chooseImage").append(img);
            }
        }
    });
}
</script>


</body>
</html>

<!-- include footer.html -->
